<template>
  <div class="mg16 flex" v-loading="isloading">
    <div class="white">
      <div class="left_nb_body">
        <div class="title mb26">
          <span>
            <svg-icon icon-class="wenjuan" class="svg-icon"></svg-icon>
          </span>
          选择创建的问题类型
        </div>
        <div>
          <ul>
            <li class="list_left" @click="addQuestion('Radio')">
              <i class="el-icon-circle-plus" style="font-size: 22px; color: #0c7ff2"></i>
              <span>单选题</span>
            </li>
            <li class="list_left" @click="addQuestion('CheckBox')">
              <i class="el-icon-circle-plus" style="font-size: 22px; color: #0c7ff2"></i>
              <span>多选题</span>
            </li>
            <li class="list_left" @click="addQuestion('Text')">
              <i class="el-icon-circle-plus" style="font-size: 22px; color: #0c7ff2"></i>
              <span>填空题</span>
            </li>
          </ul>
        </div>
        <img src="@/assets/img/w_1.png" class="btm_img" alt="" />
      </div>
    </div>
    <div class="apply_right">
      <el-form :model="questiontemplateVo" ref="dynamicValidateForm" class="demo-dynamic">
        <div class="mb16">
          <div class="error_title">
            <el-form-item prop="template.templateName"
              :rules="[{ required: true, message: '请输入问卷模板名称', trigger: 'blur' }]">
              <div class="title_body">
                <span>问卷模板名称:</span>
                <el-input v-model="questiontemplateVo.template.templateName" placeholder="请输入模板名称"
                  class="width500 mr16" />
              </div>
            </el-form-item>
          </div>
          <div class="question_list" v-for="(item, index) in questiontemplateVo.question" :key="item.answertype + index">
            <div class="ques_title">
              <span class="title" v-if="item.answertype == 'Radio'">单选</span>
              <span class="title" v-if="item.answertype == 'CheckBox'">多选</span>
              <span class="title" v-if="item.answertype == 'Text'">填空</span>
              <span>
                <el-button class="mr16" icon="el-icon-plus" v-if="item.answertype != 'Text'"
                  @click="addChoose(item)">添加选项</el-button>
                <el-button type="text" @click="delQuestion(item)">删除</el-button>
              </span>
            </div>
            <div class="ques_body">
              <el-form-item :prop="'question.' + index + '.content'"
                :rules="[{ required: true, message: '题目标题不能为空', trigger: 'blur' }]">
                <div class="mb16">
                  <span class="nums">{{ index > 8 ? index + 1 : '0' + Number(index + 1) }}</span>
                  <el-input v-model="item.content" placeholder="请输入题目标题" class="width500" />
                </div>
              </el-form-item>
              <div v-if="item.answertype == 'Radio' || item.answertype == 'CheckBox'">

                <el-form-item v-for="(items, indexs) in item.answerList" :key="items.answertype + indexs"
                  :prop="'question.' + index + '.answerList.' + indexs + '.name'"
                  :rules="[{ required: true, message: '选项不能为空', trigger: 'blur' }]">
                  <div class="mb16 ml38">
                    <el-input v-model="items.name" placeholder="输入选项" class="width500 mr16" />
                    <i class="el-icon-close" style="cursor: pointer;" @click="delChoose(item, items)"></i>
                  </div>
                </el-form-item>
              </div>
              <div v-else>
                <div class="mb16 ml38">
                  <el-input v-model="item.answerList[0].name" type="textarea" :rows="3" class="width500" />
                </div>
              </div>

            </div>
          </div>
        </div>
      </el-form>
      <div class="btm_butn">
        <el-button type="primary" @click="saveQuestion('dynamicValidateForm')">保存</el-button>
      </div>
    </div>

  </div>
</template>

<script>
import api from '@/api/index'
export default {
  data() {
    return {
      isloading: false,
      questiontemplateVo: {
        template: {
          templateName: "",
          channel: "1",
          imshowid: "",
          isDelete: false,
        },
        question: [
          {
            answertype: 'Radio',//CheckBox,Radio,Text
            content: '',
            codevalue: 'template',
            sortorder: '',
            answerList: [
              {
                name: '',
                answertype: 'Radio',//CheckBox,Radio,Text
              },
              {
                name: '',
                answertype: 'Radio',//CheckBox,Radio,Text
              }
            ]
          }
        ],
      }

    };
  },
  mounted() {
    if (this.$route.query.mid) {
      this.getTemplate()
    }
  },
  methods: {
    getTemplate() {
      let form = {
        imshowId: this.$store.getters.imShowId,
        mid: this.$route.query.mid
      }
      this.isloading = true
      api.selfMeting.selectQuestion(form).then(res => {
        this.questiontemplateVo = res.data
        this.questiontemplateVo.question.forEach(item => {
          item.answertype = item.answerList[0].answertype
        });
        this.isloading = false
      })
    },
    addChoose(val) {
      this.questiontemplateVo.question.forEach(item => {
        if (item == val) {
          item.answerList.push({ name: '', answertype: val.answertype })
        }
      });
    },
    delChoose(items, val) {
      this.questiontemplateVo.question.forEach(item => {
        if (item == items) {
          var index = item.answerList.indexOf(val)
          if (index !== -1) {
            item.answerList.splice(index, 1)
          }
        }
      });
    },
    addQuestion(val) {
      let form = {
        answertype: val,
        content: '',
        codevalue: 'template',
        sortorder: '',
        answerList: [
          {
            name: '',
            answertype: val,
          },
        ]
      }
      this.questiontemplateVo.question.push(form)
    },
    delQuestion(val) {
      var index = this.questiontemplateVo.question.indexOf(val)
      if (index !== -1) {
        this.questiontemplateVo.question.splice(index, 1)
      }
    },
    saveQuestion(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.isloading = true
          this.questiontemplateVo.template.imshowid = this.$store.getters.imShowId
          api.tool.saveTemplate(this.questiontemplateVo).then(res => {
            this.$message({ type: 'success', message: '创建成功！' })
            setTimeout(() => {
              this.$router.push('/tool/questionnaire')
              this.isloading = false
            }, 3000);
          })
        } else {
          return false;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@media only screen and (max-width: 1599px) {
  .white {
    background: #fff;
    min-width: 295px;
    width: 295px;
    height: calc(100vh - 105px);
    border-radius: 4px;
    min-height: 555px;
    padding: 10px;

    .left_nb_body {
      background: linear-gradient(231deg, #dbe4f5 0%, #fbfcfe 100%);
      border-radius: 4px;
      height: calc(100% - 25px);
      padding: 10px 10px;
      position: relative;
    }

    .title {
      @include flex(row, center, flex-start);
      font-size: 16px;
      font-weight: 600;
      color: #4f5862;
      line-height: 19px;
      margin-bottom: 10px;

      .svg-icon {
        background: linear-gradient(360deg, #728fff 0%, #5c71fe 100%);
        font-size: 25px;
        padding: 6px;
        border-radius: 6px 6px 6px 6px;
        display: inline-block;
        margin-right: 10px;
        color: #fff;
      }
    }

    .list_left {
      @include flex(row, center, flex-start);
      background: rgba(255, 255, 255, 0.79);
      border-radius: 6px 6px 6px 6px;
      border: 1px solid #cee5fc;
      padding: 19px 17px;
      cursor: pointer;
      margin-bottom: 16px;

      span {
        font-size: 14px;
        font-weight: 600;
        color: #4f5862;
        line-height: 16px;
        padding-left: 14px;
      }
    }

    .list_left:hover {
      background: #cee5fc;
      transition: background 0.5s;
      color: #fff;
    }

    .content {
      font-size: 12px;
      color: #4f5862;
      line-height: 24px;
      margin-bottom: 10px;
    }

    .btm_img {
      display: inline-block;
      width: 126px;
      position: absolute;
      right: 0;
      bottom: 0;
      z-index: 1;
    }

    .left_tp1 {
      padding: 12px 0 12px 15px;
      background: rgba(255, 255, 255, 0.79);
      border-radius: 6px 6px 6px 6px;
      border: 1px solid #cee5fc;
      position: relative;
      z-index: 3;

      h6 {
        font-size: 12px;
        color: #7e8790;
        line-height: 20px;
        margin-bottom: 10px;
      }

      .tp1_content {
        @include flex(row, center, flex-start);

        .svg-icon2 {
          font-size: 22px;
          display: inline-block;
          margin-right: 9px;
        }

        h4 {
          font-size: 14px;
          font-weight: 600;
          color: #4f5862;
          line-height: 16px;
          margin-bottom: 5px;
        }

        span {
          font-size: 12px;
          color: #7e8790;
          line-height: 14px;
        }
      }
    }

    .success {
      @include flex(row, center, flex-start);
      padding: 20px 9px;
      font-size: 14px;
      font-weight: 600;
      color: #4f5862;
      line-height: 16px;
      position: relative;

      .success_shu {
        position: absolute;
        top: -28px;
        left: 26px;
        z-index: 1;
        height: 152px;
        width: 4px;
      }
    }

    .sc_tg_parent {
      background: #ecf0f5;
      position: relative;
      z-index: 3;
      border-radius: 50%;

      .sc_tg {
        display: inline-block;
        border: 1px solid #0c7ff2;
        height: 16px;
        border-radius: 50%;
        margin: 10px;

        span {
          display: inline-block;
          width: 12px;
          height: 12px;
          border-radius: 50%;
          background: #0c7ff2;
          margin: 2px;
        }
      }
    }

    .sc_tg_parent2 {
      background: #ecf0f5;
      position: relative;
      z-index: 3;
      border-radius: 50%;
      padding: 10px;
      width: 20px;
      height: 20px;

      span {
        width: 18px;
        height: 18px;
        display: inline-block;
        border-radius: 50%;
        background: #fff;
        border: 1px solid #ecf0f5;
      }
    }

    .sc_zt {
      background: #ff6332;
      border-radius: 2px 2px 2px 2px;
      font-size: 12px;
      color: #ffffff;
      line-height: 14px;
      padding: 3px 4px;
      margin-left: 16px;
    }

    .sc_tgs {
      background: #11ad29;
      border-radius: 2px 2px 2px 2px;
      font-size: 12px;
      color: #ffffff;
      line-height: 14px;
      padding: 3px 4px;
      margin-left: 16px;
    }
  }
}

@media only screen and (min-width: 1600px) and (max-width: 3000px) {
  .white {
    background: #fff;
    min-width: 295px;
    width: 295px;
    height: calc(100vh - 105px);
    border-radius: 4px;
    min-height: 670px;
    padding: 10px;

    .left_nb_body {
      background: linear-gradient(231deg, #dbe4f5 0%, #fbfcfe 100%);
      border-radius: 4px;
      height: calc(100% - 50px);
      padding: 25px 20px;
      position: relative;
    }

    .title {
      @include flex(row, center, flex-start);
      font-size: 16px;
      font-weight: 600;
      color: #4f5862;
      line-height: 19px;
      margin-bottom: 15px;

      .svg-icon {
        font-size: 25px;
        padding: 6px;
        background: linear-gradient(360deg, #728fff 0%, #5c71fe 100%);
        border-radius: 6px 6px 6px 6px;
        display: inline-block;
        margin-right: 10px;
        color: #fff;
      }
    }

    .list_left {
      @include flex(row, center, flex-start);
      background: rgba(255, 255, 255, 0.79);
      border-radius: 6px 6px 6px 6px;
      border: 1px solid #cee5fc;
      padding: 19px 17px;
      cursor: pointer;
      margin-bottom: 16px;

      span {
        font-size: 14px;
        font-weight: 600;
        color: #4f5862;
        line-height: 16px;
        padding-left: 14px;
      }
    }

    .list_left:hover {
      background: #cee5fc;
      transition: background 0.5s;
      color: #fff;
    }

    .content {
      font-size: 12px;
      color: #4f5862;
      line-height: 24px;
      margin-bottom: 20px;
    }

    .btm_img {
      display: inline-block;
      width: 126px;
      position: absolute;
      right: 0;
      bottom: 0;
      z-index: 1;
    }

    .left_tp1 {
      padding: 14px 0 19px 15px;
      background: rgba(255, 255, 255, 0.79);
      border-radius: 6px 6px 6px 6px;
      border: 1px solid #cee5fc;
      position: relative;
      z-index: 3;

      h6 {
        font-size: 12px;
        color: #7e8790;
        line-height: 20px;
        margin-bottom: 10px;
      }

      .tp1_content {
        @include flex(row, center, flex-start);

        .svg-icon2 {
          font-size: 22px;
          display: inline-block;
          margin-right: 9px;
        }

        h4 {
          font-size: 14px;
          font-weight: 600;
          color: #4f5862;
          line-height: 16px;
          margin-bottom: 5px;
        }

        span {
          font-size: 12px;
          color: #7e8790;
          line-height: 14px;
        }
      }
    }

    .success {
      @include flex(row, center, flex-start);
      padding: 30px 9px;
      font-size: 14px;
      font-weight: 600;
      color: #4f5862;
      line-height: 16px;
      position: relative;

      .success_shu {
        position: absolute;
        top: -28px;
        left: 26px;
        z-index: 1;
        height: 152px;
        width: 4px;
      }
    }

    .sc_tg_parent {
      background: #ecf0f5;
      position: relative;
      z-index: 3;
      border-radius: 50%;

      .sc_tg {
        display: inline-block;
        border: 1px solid #0c7ff2;
        height: 16px;
        border-radius: 50%;
        margin: 10px;

        span {
          display: inline-block;
          width: 12px;
          height: 12px;
          border-radius: 50%;
          background: #0c7ff2;
          margin: 2px;
        }
      }
    }

    .sc_tg_parent2 {
      background: #ecf0f5;
      position: relative;
      z-index: 3;
      border-radius: 50%;
      padding: 10px;
      width: 20px;
      height: 20px;

      span {
        width: 18px;
        height: 18px;
        display: inline-block;
        border-radius: 50%;
        background: #fff;
        border: 1px solid #ecf0f5;
      }
    }

    .sc_zt {
      background: #ff6332;
      border-radius: 2px 2px 2px 2px;
      font-size: 12px;
      color: #ffffff;
      line-height: 14px;
      padding: 3px 4px;
      margin-left: 16px;
    }

    .sc_tgs {
      background: #11ad29;
      border-radius: 2px 2px 2px 2px;
      font-size: 12px;
      color: #ffffff;
      line-height: 14px;
      padding: 3px 4px;
      margin-left: 16px;
    }
  }
}

.mb26 {
  margin-bottom: 26px !important;
}

.apply_right {
  margin-left: 16px;
  flex-grow: 1;
  width: 50%;
  background: #fff;

  .btm_butn {
    padding: 23px 0;
    border-top: 1px solid #E5EAF0;
    text-align: center;
  }

  .title_body {
    padding: 12px 24px;
    border-bottom: 1px solid #dde2e8;

    span {
      font-size: 14px;
      font-weight: 600;
      color: #202933;
      line-height: 16px;
      padding-right: 20px;
    }
  }

  .question_list {
    margin: 0 24px;
    margin-top: 30px;

    .ques_title {
      @include flex(row, center, space-between);

      .title {
        font-size: 16px;
        font-weight: 600;
        color: #202933;
        line-height: 19px;
      }
    }

    .ques_body {
      margin-top: 21px;
      padding: 24px;
      background: #F9FAFD;

      .nums {
        font-size: 14px;
        color: #000000;
        line-height: 16px;
        padding: 0 11px;
      }
    }

    .ml38 {
      margin-left: 38px;
    }
  }
}

.width500 {
  width: 500px;
}

::v-deep .el-form-item {
  margin-bottom: 0px !important;
}

::v-deep .el-form-item__error {
  top: 70% !important;
  left: 38px !important;
}

::v-deep .error_title .el-form-item__error {
  top: 70% !important;
  left: 133px !important;
}</style>